<template>
	<view>
		<TopNav title="成品列表"></TopNav>
		<view class="cu-card case">
			<view class="cu-item shadow padding" v-for="item in list" :key="item.id" @click=handleSelection(item)
				:class="{'selection':checkSelection(item)}">

				<view class="full-width">
					<view class="flex justify-between">
						<view class="full-width text-left overflow-hidden text-cut">
							<text class="text-bold text-xl"
								:class="{'text-blue':checkSelection(item)}">{{item.name || '-'}}</text>
							<text>（{{item.code}}）</text>
						</view>
						<view class="shrink-0 text-left">
							<text class="text-gray text-width">库存：</text>
							<text>{{item.stock || '0'}}{{item.stockUnit || '-'}}</text>
						</view>
					</view>
					<view class="flex justify-between padding-top-sm">
						<view class="basis-df text-left">
							<text class="text-gray text-width">规格：</text>
							<text>{{item.specifications || '0'}}{{item.specificationsUnitDictName || '-'}}</text>
						</view>
						<view class="basis-df text-left">
							<text class="text-gray text-width">类型：</text>
							<text>{{item.secondTypeDictName || '-'}}</text>
						</view>
					</view>
					<view class="flex justify-between padding-top-sm">
						<view class="basis-df text-left">
							<text class="text-gray text-width">仓库：</text>
							<text>{{item.warehouseName || '-'}}</text>
						</view>

					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" @loadmore="getMoreList" v-if="list.length" />
		<view class="bottom-tools padding bg-white">
			<view class="padding-left-sm padding-bottom-xs" v-if="multiple">
				<text>已选 {{selectionList.length}} / {{list.length}}</text>
			</view>
			<view class="flex justify-around">
				<van-button class='basis-sm' plain hairline type="info" @click="handleReset">重 置</van-button>
				<van-button class='basis-sm' type="primary" @click="handleConfirm">
					确 定
				</van-button>
			</view>
		</view>
		<van-empty description="暂无数据" v-if="!list.length" />
	</view>
</template>

<script>
	import {
		list
	} from '@/api/work/products-inventory'
	import mixins from "@/mixins"
	export default {
		mixins: [mixins],
		data() {
			return {
				loadStatus: 'loadmore',
				baseUrl: getApp().globalData.config.baseUrl,
				queryParams: {
					productionBaseId: undefined,
					productTypeDict: 'CP',
					pageSize: 10,
					pageNum: 1
				},
				selectionList: [],
				list: [],
				multiple: false
			}
		},
		onLoad(query) {
			(async () => {
				this.queryParams.productionBaseId = this.$store.state.user.baseInfo.id
				this.multiple = query.multiple
				await this.getList()
				if (query.id) {
					let list = query.id.split(",")
					for (let id of list) {
						let findResult = this.list.find(item => item.id === id)
						this.handleSelection(findResult)
					}
				}
			})()

		},
		onReachBottom() {
			if (this.loadStatus === 'nomore') return
			this.queryParams.pageNum += 1
			this.getList()
		},
		methods: {

			checkSelection(val) {
				if (this.selectionList.length === 0) return false
				return this.selectionList.find(item => item.id === val.id)
			},
			handleSelection(val) {
				if (!val) return
				let findIndexResult = this.selectionList.findIndex(item => item.id === val.id)
				if (findIndexResult >= 0) {
					this.selectionList.splice(findIndexResult, 1)
					return
				}
				if (this.multiple) {
					this.selectionList.push(val)
				} else {
					this.selectionList = [val]
				}
			},
			getMoreList() {
				this.queryParams.pageNum += 1
				this.getList()
			},
			async getList() {
				await list(this.queryParams).then(res => {
					this.listFormat(res)
				})
			},
			handleReset() {
				this.selectionList = []
			},
			handleConfirm() {
				uni.$emit('productsSelect', this.selectionList)
				this.$tab.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		padding-bottom: 86px;
	}

	.selection {
		border: 1px solid #0081ff;
	}
</style>